import React, { memo, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';


import { getSizeImage } from '@/utils/format-utils';
import { getSongDetailAction } from '@/pages/player/store/actionCreators';

import { TopRankingWrapper } from './style';

//==>> 发现音乐 / 推荐 -> 榜单中的新歌榜、歌曲榜、飙升榜组件
export default memo(function CJXTopRanking(props) {
    // props and state
    const { info } = props;
    const { tracks = [] } = info;
    // console.log(info);

    // redux hooks
    const dispatch = useDispatch();

    // other handle
    const playMusic = useCallback((item) => {
        // console.log(item.id);
        dispatch(getSongDetailAction(item.id));
    }, [dispatch])

    return (
        <TopRankingWrapper>
            <div className="header">
                <div className="image">
                    <img src={getSizeImage(info.coverImgUrl)} alt="" />
                    <Link to="/discover/ranking" className="image_cover">ranking</Link>
                </div>
                <div className="info">
                    <Link to="/discover/ranking">{info.name}</Link>
                    <div>
                        <button className="btn play sprite_02"></button>
                        <button className="btn favor sprite_02"></button>
                    </div>
                </div>
            </div>
            <div className="list">
                {
                    tracks.slice(0, 10).map((item, index) => {
                        return (
                            <div key={item.id} className="list-item">
                                <div className="rank">{index + 1}</div>
                                <div className="info">
                                    <span className="name text-nowrap">{item.name}</span>
                                    <div className="operate">
                                        <button className="btn sprite_02 play"
                                            onClick={e => playMusic(item)}></button>
                                        <button className="btn sprite_icon2 addto"></button>
                                        <button className="btn sprite_02 favor"></button>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="footer">
                <Link to="/discover/ranking">查看全部 &gt;</Link>
                {/* <a href="/discover/ranking">查看全部 &gt;</a> */}
            </div>
        </TopRankingWrapper>
    )
})
